<template>
    <!-- device != 'mobile' -->
    <div class="box" :style="{ height: screenHeight + 'px' }">
      <div class="left"  :style="{ height: screenHeight + 'px' }">
    </div>
      <div class="middle" :style="{ height: screenHeight + 'px' }">
             <!-- 照片对比 -->
             <photoCompare class=" main_left bg-white h-64 w-full" value="45">
                <img slot="first" class="h-64 object-fit-contain h-full w-full" src="https://huangheban-1309368755.cos.ap-shanghai.myqcloud.com/upload/thumbnail_2024/10/18/1729217810632_data_result_pores_20241018101906A263.ydu" alt="">
                <img slot="second" class="object-fit-contain h-full w-full" src="https://huangheban-1309368755.cos.ap-shanghai.myqcloud.com/upload/thumbnail_2024/10/18/1729217810632_data_result_brown_20241018101908A264.ydu" alt="">
             </photoCompare>
      </div>
      
    
    </div>
  </template>
  
  <script>
import photoCompare from "@/views/components/photoMark/photoCompare";
  import { mapGetters } from "vuex";
  export default {
    name: "photoMark",
    components: {photoCompare },
    props: [
     
    ],
    dicts: [
    
    ],
    data() {
      return {
       
        screenHeight: 0,
       
      };
    },
  
    created() {
  
    },
    beforeMount() {
      window.addEventListener('resize', this.$_resizeHandler)
    },
    mounted() {
      console.log("this.libraryId*******************************")
      console.log(this.libraryId)
      window.screenHeight = document.body.clientHeight;
      this.screenHeight = window.screenHeight;
  
      this.imgShowContainerH = this.screenHeight - 40
    
    },
    computed: {
      ...mapGetters(["token", "avatar", "isUpdate", "device", "nickName"]),
      isAdmin() {
        return this.$store.state.user.name === "admin" ? true : false;
      },
    },
    watch: {},
    methods: {
     
      $_resizeHandler() {
        window.screenHeight = document.body.clientHeight;
        this.screenHeight = window.screenHeight;
  
        this.imgShowContainerH = this.screenHeight - 40
  
      },
    
     

    },
  };
  </script>
  
  <style lang="scss" scoped>
  .object-fit-contain{
    object-fit: contain;
  }
  .w-full{
  width:100%;
  height:calc(100vh - 50px);
  margin:0 auto;
}
  .box {
    // height: 750px;
    display: flex;
    flex-direction: row;
    height: calc(100vh - 50px);
    // height:90vh;
    width: 100%;
    color: #282828;
    position: relative;
  }
  
  ::v-deep .left::-webkit-scrollbar {
    width: 2px;
  }
  
  ::v-deep .left::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #1890FF;
    cursor: pointer;
    z-index: 999;
  }
  
  .left {
    padding-top: 40px;
    background-color: #282828;
    flex: 0px 0 128px;
    // border-right: 1px solid #171717;
    width: 128px; //41px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  
   
   
  }
  
  .middle {
    width:calc(100% - 128px);
    display: flex;
    justify-content: center;
    background-color: #000;
    flex-direction: column;
  }
  
 
  
  
  </style>
  